<template>
    <div class="main-content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="query" ref="query" slot="form" label-width="75px" label-position="right">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="所属省" prop="provinceId">
                            <province v-model="query.provinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属市" prop="cityId">
                            <city v-model="query.cityId" :province="query.provinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属区县" prop="areaId">
                            <region v-model="query.areaId" :city="query.cityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称" prop="schoolName">
                             <school v-model="query.schoolName" style="width:100%" :provinceId="query.provinceId" :cityId="query.cityId" :areaId="query.areaId" @change="schoolChange"></school>
                            <!-- <el-autocomplete v-model="query.schoolName" :fetch-suggestions="remoteMethod" placeholder="请输入关键词" style="width:100%"></el-autocomplete> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="日期" prop="date">
                            <el-date-picker v-model="query.date" type="date" placeholder="日期" style="width:100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
            </div>
            <el-table :data="tableData" border v-loading="loading" style="width: 100%">  
                <el-table-column label="学校名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sSchoolName | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="商品名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sProductName | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="发放批次" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sBatchNumber | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="发放数量（张）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sNumber | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="发放时间" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.sCreateTime | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="165">
                    <template scope="scope">
                        <el-button type="text" v-if="scope.row.status =='0' || scope.row.status =='1'" class="btn-success" @click="goToCheck(scope.row)">查看</el-button>
                        <el-button type="text" v-if="scope.row.status =='0'" class="btn-success" @click="cancelRecord(scope.row.pId)">撤回</el-button>
                        <el-button type="text" v-if="scope.row.status =='0'" class="btn-success" @click="openRecord(scope.row.pId)">开通</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" 
                :current-page.sync="pageQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" 
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import Levelbar from '../../layout/Levelbar';
    import TableLayout from 'components/TableLayout';
    import school from 'components/SchoolClasss/school';
    import province from 'components/CascadeRegion/province';
    import city from 'components/CascadeRegion/city';
    import region from 'components/CascadeRegion/region';
    // import { querySchoolByName } from 'api/studentMange';
    import {pageCardCouponsGrant, batchCancelCardCoupons, openServiceByBatchNumberId} from 'api/cardCoupons';
    import { mapState, mapActions } from 'vuex';

    export default {
        name: 'cardExtendList',
        components: { Levelbar, TableLayout, province, city, region, school},
        data() {
            return { 
                timeout: '',
                loading: true,  
                schoolLoading: false,
                schoolList: [],
                tableData: [],
                pageQuery: {
                    page: 1,
                    total: 0
                },
                query: {
                    provinceId: '',
                    cityId: '',
                    areaId: '',
                    schoolName: '',
                    schoolId: '',
                    date: ''
                }
            }
        },
        created() {
            this.queryData();
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        filters: {
            dateFilter(val) {
                return val.substring(0, 19)
            }
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.page = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.page = val;
                this.queryData();
            },
            onSubmit() {
                this.pageQuery.page = 1;
                this.queryData();
            },
            searchData() {
                this.queryData();
            },
            queryData() {
                this.tableData= [];
                this.loading = true;
                let date = this.query.date == '' ?'':moment(this.query.date).format('YYYY-MM-DD');
                pageCardCouponsGrant(
                    this.pageQuery.page, 
                    this.config.pageSize,
                    this.query.provinceId,
                    this.query.cityId,
                    this.query.areaId,
                    this.query.schoolId,
                    date)
                    .then(response => {
                        this.tableData = response.data.content.list;
                        this.pageQuery.total = response.data.content.pagination.total;
                        this.loading = false;
                    });
            },
            goToCheck(row) {                            
                this.$router.push({ path: `extendCheck/${row.pId}/${row.fSchoolId}`});
            },
            cancelRecord(pid) {
                this.$confirm('该批次中已经使用的卡券不能撤回，确定要撤回该批次发放的所有未使用的卡券吗？', ' ', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    
                    batchCancelCardCoupons(pid).then(response => {
                        this.queryData(this.pageQuery.page);
                        this.$message({
                            type: 'success',
                            message: '批量撤销成功'
                        });
                        this. queryData();
                    })                   
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消撤销'
                    });          
                });
            },
            openRecord(pid) {
                this.$confirm('该批次中已经使用的卡券不能开通，确定要开通该批次发放的所有未使用的卡券吗？', ' ', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    // console.log('pid', pid);
                    openServiceByBatchNumberId(pid).then(response => {
                        this.queryData(this.pageQuery.page);
                        if (response.data.content.length == 0) {
                            this.$message({
                                type: 'success',
                                message: response.data.errorMsg
                            });
                        } else {
                            let name = response.data.content.join('，');
                            this.$message({
                                type: 'error',
                                message: name +'开通失败'
                            });
                        }
                       
                        this. queryData();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消开通'
                    });          
                });
            },


            // 获取学校id
            schoolChange(val) {
                this.query.schoolId = val
            },         
            createStateFilter(query) {
                return (state) => {
                    state.value = state.schoolName; 
                    return (state.value.toLowerCase().includes(query.toLowerCase()));
                };
            }

        }

    }
</script>

<style lang="scss" scoped>

</style>

